<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 采用背景刷覆</title>
    <style>
        body { margin: 0; background: #000; overflow: hidden; }
        .demo{
            height: 100vh;
            width: 100vw;
        }
        canvas { 
        display: block;
        width: 100%;
        height: 140%;
        
         }
    </style>
</head>
<body>
    <div id="demo">

        <canvas id="canvas"></canvas>
    </div>
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const width=window.innerWidth*devicePixelRatio,
         height=window.innerHeight*devicePixelRatio;

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const centerX = width; // 圆心在右上角
        const centerY = 0;            // 圆心在右上角
        const arcs = [];
        const numArcs = 300;  // 轨迹数量（保证持续填充）
        const speed = 0.0005; // **统一的旋转速度**


        const blurCanvas = document.createElement("canvas");
        const blurCtx = blurCanvas.getContext("2d");

        blurCanvas.width = width;
        blurCanvas.height = height;
        // 生成多个圆弧
        for (let i = 0; i < numArcs; i++) {
            let angle =.4 * Math.PI + (Math.PI*.7 ) * (i / numArcs); // **均匀分布**
            let radius = Math.random() * (width ) + 100; // 随机半径
            let startAngle = angle;
            let endAngle = angle + 0.05; // 圆弧长度
            let baseColor = Math.random() * 360; // 颜色基调 (HSL 颜色)

            arcs.push({ radius, startAngle, endAngle, baseColor });
        }
console.log(arcs);
        function draw() {
            blurCtx.fillStyle = "rgba(0, 0, 0, 1)";  // 渐隐残影
            blurCtx.fillRect(0, 0, width, height);

            blurCtx.lineWidth = 3;
            blurCtx.lineCap = "round";

            arcs.forEach((arc, index) => {
                arc.startAngle += speed; // **统一的旋转速度**
                arc.endAngle += speed;

                // **如果弧线超出第三象限（超过 3π/2），则重新循环回 π**
                if (arc.startAngle >  1.1*Math.PI ) {
                    arc.startAngle =.4*Math.PI;
                    arc.endAngle = arc.startAngle + 0.05; // 重新定义弧线长度
                    arc.radius = Math.random() * (width ) + 100; // 重新设定随机半径
                }
          
                // **优化渐变计算：使用 HSL 颜色，减少 createLinearGradient 调用**
                let color1 = `hsla(${arc.baseColor}, 30%, 50%, 1)`;

                blurCtx.strokeStyle = color1;
                blurCtx.beginPath();
                blurCtx.arc(centerX, centerY, arc.radius, arc.startAngle, arc.endAngle);
                blurCtx.stroke();

            
            });
            

            ctx.clearRect(0, 0, width, height);
            ctx.drawImage(blurCanvas, 0, 0);
            requestAnimationFrame(draw);
        }
        draw();
    </script>
</body>
</html>
